<template>
  <view class="house-card">
    <image class="house-image" :src="house.imageUrl" mode="aspectFill"></image>
    <view class="house-info">
      <view class="title">{{house.title}}</view>
      <view class="desc">
        <text>{{house.area}}</text>
        <text>{{house.location}}</text>
      </view>
      <view class="tags">
        <text 
          v-for="(tag, index) in house.tags" 
          :key="index"
          class="tag"
        >{{tag}}</text>
      </view>
      <view class="price">
        <text class="number">{{house.price}}</text>
        <text class="unit">元/月</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'HouseCard',
  props: {
    house: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="less">
@import '../../styles/uni.less';

.house-card {
  margin: @spacing-sm;
  background-color: @bg-color;
  border-radius: @border-radius-md;
  overflow: hidden;
  
  .house-image {
    width: 100%;
    height: 400rpx;
  }
  
  .house-info {
    padding: @spacing-md;
    
    .title {
      font-size: @font-size-lg;
      color: @text-color;
      margin-bottom: @spacing-sm;
    }
    
    .desc {
      font-size: @font-size-md;
      color: @text-color-secondary;
      margin-bottom: @spacing-sm;
      
      text {
        margin-right: @spacing-md;
      }
    }
    
    .tags {
      margin-bottom: @spacing-sm;
      
      .tag {
        display: inline-block;
        font-size: @font-size-sm;
        color: @primary-color;
        background-color: fade(@primary-color, 10%);
        padding: 4rpx @spacing-sm;
        border-radius: @border-radius-sm;
        margin-right: @spacing-sm;
      }
    }
    
    .price {
      color: @error-color;
      
      .number {
        font-size: 36rpx;
        font-weight: bold;
      }
      
      .unit {
        font-size: @font-size-md;
        margin-left: 4rpx;
      }
    }
  }
}
</style> 